<template>
    <div class="class-room">

        班级 :{{ className }}

        <div class="class-room-wrap">

            <Student name="张三" class="student" />
            <Student name="李四" class="student" />
            <Student name="王五" class="student" />
            <Student name="赵六" class="student" />
            <Student name="孙齐" class="student" />
            <Student name="冯工" class="student" />
        </div>

    </div>
</template>

<script setup lang="ts" name='ClassRoom'>
import { ref, reactive } from "vue";
import Student from "./Student.vue";

defineProps(['className'])



</script>

<style scoped>
.class-room {
    padding: 10px;
    background-color: #a3b951;
    box-shadow: 0 0 3px pink;
    border-radius: 5px;

}

.class-room-wrap {

    display: flex;

    flex-wrap: wrap;
}

.student {

    width: 280px;
    height: 180px;
    margin: 10px;
    background-color: aliceblue;
    box-shadow: 0 0 5px #000000;
    border-radius: 5px;


}
</style>